import './index.scss';

import nftImg from '@/assets/icons/nftimg.png';
import bill from '@/assets/icons/bill.png';
import link from '@/assets/icons/link.png';
import moneyBag from '@/assets/icons/tq.png';
import extract from '@/assets/icons/hg.png';
import rankinglist from '@/assets/icons/rankinglist.png';
import { Col, Row, message, Input } from 'antd';
import React, { useEffect, useState } from "react";
import { user_bind_invitation, get_user_vip } from '@/utils/mixin.ts'
const Sidefunction = () => {
    const [referralCode, setReferralCode] = useState([]);
    const [referralCodeValue, setReferralCodeValue] = useState(''); 

    // useEffect 第二个参数为空数组表示仅在组件挂载时执行
    useEffect(() => {

        // 获取vip信息
        get_user_vip({
            email: localStorage.getItem('email')
        }).then((res) => {
            if (res) {
                setReferralCode(res.data.invite_code);
            }
        });
      }, []);  // 空数组表示只在组件挂载时执行
    const copyToClipboard = (text) => {
        if(!text) return
        const tempInput = document.createElement('input');
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        tempInput.setSelectionRange(0, 99999);
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        message.success('复制成功')
      };
      const bindingReferralCode = () => {
        if(!referralCodeValue) return
        user_bind_invitation({
            email: localStorage.getItem('email'),
            invite_code: referralCodeValue
        }).then(res=> {
            if (res && res.code == 0) {
                message.success('绑定成功');
                setReferralCodeValue('');
            } else {
                message.error('绑定失败');
            }
        })
    }
    return (
        <div className="sidefunction">
            <div className="top">
                <Row className="sidefunction_item">
                <Col xl={8} md={12} className="item">
                        <div className="item_img">
                            <img src={extract} alt="" />
                        </div>
                        <div className="item_text">排行榜</div>
                    </Col>
                    <Col xl={8} md={12} className="item">
                        <div className="item_img">
                            <img src={moneyBag} alt="" />
                        </div>
                        <div className="item_text">提取</div>
                    </Col>
                    <Col xl={8} md={12} className="item">
                        <div className="item_img">
                            <img src={link} alt="" />
                        </div>
                        <div className="item_text">推荐</div>
                    </Col>
                    <Col xl={8} md={12} className="item">
                        <div className="item_img">
                            <img src={nftImg} alt="" />
                        </div>
                        <div className="item_text">NFT质押</div>
                    </Col>
                    <Col xl={8} md={12} className="item">
                        {/* <div className="item_img">
                            <img src={bill} alt="" />
                        </div>
                        <div className="item_text">订单</div> */}
                    </Col>
                   
                   
                    
                    <Col xl={8} md={12} className="item">
                        {/* <div className="item_img">
                            <img src={rankinglist} alt="" />
                        </div>
                        <div className="item_text">钱包</div> */}
                    </Col>
                </Row>
            </div>
            <div className="bottom">
                <div className="bottom_title">您的推荐链接</div>
                <div className="bottom_link">
                    <div className="linkContent">https://turingbot.io</div>
                    <div className="linkBtn" onClick={() => copyToClipboard('https://turingbot.io' + '/#/?code=' + referralCode)}>复制</div>
                </div>
            </div>
            <div class="searchInput">
                    <p>绑定推荐码</p>
                    <Input
                        placeholder="Referral code"
                        suffix={<span style={
                            {
                                color: '#FA6944'
                            }
                        } onClick={() => bindingReferralCode()}>
                            绑定
                        </span>}
                        onChange={(e) => { setReferralCodeValue(e.target.value)}}
                        
                    />
                </div>
                <div class="referral">
                    <p class="ReferralCode">推荐识别代码</p>
                    <span class="copy-code" id="copyCode" data-clipboard-target="#inviteCode">
                        <span class="invite_code" id="inviteCode">{referralCode}</span>
                        <svg
                            onClick={() => {copyToClipboard(referralCode)}}
                            xmlns="http://www.w3.org/2000/svg"
                            width="18"
                            height="18" viewBox="0 0 17 17" fill="none">
                            <path
                                d="M12.0415 4.25H2.12484C1.73364 4.25 1.4165 4.50371 1.4165 4.81667V15.0167C1.4165 15.3296 1.73364 15.5833 2.12484 15.5833H12.0415C12.4327 15.5833 12.7498 15.3296 12.7498 15.0167V4.81667C12.7498 4.50371 12.4327 4.25 12.0415 4.25Z"
                                stroke="#999999" stroke-linejoin="round" />
                            <path
                                fill-rule="evenodd" clip-rule="evenodd"
                                d="M4.74755 1.997C4.74746 1.99699 4.74769 1.99623 4.74856 1.99478C4.74808 1.9963 4.74765 1.99702 4.74755 1.997ZM4.76981 1.97306C4.75871 1.98195 4.75287 1.9886 4.75 1.9926V3.54166H3.75V1.98332C3.75 1.29587 4.40087 0.916656 4.95833 0.916656H14.875C15.4325 0.916656 16.0833 1.29587 16.0833 1.98332V12.1833C16.0833 12.8708 15.4325 13.25 14.875 13.25H13.4583V12.25H14.875C14.965 12.25 15.03 12.2204 15.0635 12.1936C15.0746 12.1847 15.0805 12.178 15.0833 12.174V1.9926C15.0805 1.9886 15.0746 1.98195 15.0635 1.97306C15.03 1.94626 14.965 1.91666 14.875 1.91666H4.95833C4.86831 1.91666 4.80332 1.94626 4.76981 1.97306ZM15.0848 12.1719C15.0856 12.1704 15.0859 12.1697 15.0858 12.1696C15.0857 12.1696 15.0856 12.1698 15.0854 12.1703C15.0852 12.1706 15.085 12.1712 15.0848 12.1719ZM15.0858 1.997C15.0857 1.99702 15.0852 1.9963 15.0848 1.99478C15.0856 1.99623 15.0859 1.99699 15.0858 1.997Z"
                                fill="#999999" />
                        </svg>
                    </span>
                </div>
        </div>
    );
};

export default Sidefunction;
